<template>
  <app-container>
    <app-block>
      <zm-form :model="searchForm" ref="searchForm" inline>
        <zm-form-item prop="returnedNo">
          <zm-input
            class="w200"
            v-model="searchForm.returnedNo"
            placeholder="输入回款编码或销售单号"
          />
        </zm-form-item>
         <zm-form-item label prop="gathering">
          <zm-data-select
            v-model="searchForm.timeType"
            :list="timeTypeList"
            label-name="name"
            value-key="value"
            class="w200"
          ></zm-data-select>
        </zm-form-item>
        <zm-form-item prop="endTime">
          <zm-date-picker
            :target="searchForm"
            start-key="startTime"
            end-key="endTime"
          />
        </zm-form-item>
        <zm-form-item label prop="gathering">
          <zm-data-select
            v-model="searchForm.gathering"
            api="getOrderCompanyList"
            label-name="companyName"
            value-key="companyId"
            placeholder="收款单位"
            class="w200"
          ></zm-data-select>
        </zm-form-item>
        <zm-form-item label prop="customerName">
          <!-- <zm-data-select
            v-model="searchForm.customerId"
            api="getCustomerList"
            placeholder="客户名称"
            class="w200"
          ></zm-data-select> -->
          <zm-input
            class="w200"
            v-model="searchForm.customerName"
            placeholder="客户名称"
          />
        </zm-form-item>
        <zm-form-item label prop="returnedType">
          <el-select v-model="searchForm.returnedType" placeholder="请选择回款类型">
              <el-option
                v-for="(item,index) in returnedTypeSelect"
                :key="index"
                :label="item.name"
                :value="item.value"
>
              </el-option>
          </el-select>
        </zm-form-item>
        <zm-form-item label prop="salesmanId">
          <zm-data-select
            v-model="searchForm.salesmanId"
            api="getSaleList"
            placeholder="所属业务员"
            class="w200"
          ></zm-data-select>
        </zm-form-item>
        <zm-form-item>
          <zm-button @click="onSearch" t="search"></zm-button>
          <zm-button @click="onReset" t="reset"></zm-button>
        </zm-form-item>
        <div>
          <zm-form-item label="审批状态:" prop="">
            <zm-data-radio
              is-btn
              k1="checkStatus"
              v-model="searchForm.checkStatus"
              @change="onSearch"
            />
          </zm-form-item>
        </div>
        <div>
          <zm-form-item label="逾期状态:" prop="">
            <zm-data-radio
              is-btn
              has-all
              k1="overdueStatus"
              v-model="searchForm.overdueStatus"
              @change="onSearch"
            />
          </zm-form-item>
        </div>
      </zm-form>
    </app-block>
    <app-block>
      <div class="mb10">
        <zm-button t="add" @click="onAdd">
          添加
        </zm-button>
        <zm-button type="warning" @click="onGetFields" v-if="searchForm.checkStatus==='3'">
          导出
        </zm-button>
        <zm-export
          ref="export"
          :api="exportApi()"
          type="warning"
          :params="exportForm"
          v-show="false"
        ></zm-export>
      </div>
      <zm-table-data
        :data="tableParams.data"
        ref="multipleTable"
        :columns="columns"
        :fetch="loadList"
        :table-params="tableParams"
        :mutilple="searchForm.checkStatus==='3'"
        @selection-change="saveIds"
        :config-header="searchForm.checkStatus==='3'"
        :store-key="SOTRE_KEY_FINANCIAL_RECEIVABLELIST_LIST"
        :head-min="5"
        :head-max="15"
      ></zm-table-data>
    </app-block>
    <new-panel
      v-if="newParams.visible"
      v-model="newParams.visible"
      :obj="newParams.obj"
      @after-save="loadList"
    ></new-panel>
    <detail-receivable
      v-if="detailParams.visible"
      v-model="detailParams.visible"
      :obj="detailParams.obj"
      :is-show-btn="false"
      @after-save="loadList"
    ></detail-receivable>
    <detail-container
      v-if="extendDetailParams.visible"
      v-model="extendDetailParams.visible"
      :id="extendDetailParams.id"
      :business-id="extendDetailParams.id"
      :is-show-btn="false"
      :type="extendDetailParams.type"
    >
    </detail-container>
    <export-panel
      :api="exportField()"
      v-if="exportParams.visible"
      v-model="exportParams.visible"
      @after="onExport"
      type="5"
    ></export-panel>
  </app-container>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import {
  exportList,
  getPageList,
  delReturned,
  exportField
} from '@/api/src/returnedMoney'
import { submit, cancel, checkApprove } from '@/api/src/approve'
import { columns, returnedTypeSelect, timeTypeList } from './const'
import NewPanel from './components/New'
import DetailReceivable from './components/detail'
import DetailContainer from '@/components/DetailContainer'
import ExportPanel from '@/components/exportFields'
import { SOTRE_KEY_FINANCIAL_RECEIVABLELIST_LIST } from '@/model/tableStoreKey'

export default {
  name: 'Receivable',
  components: { DetailReceivable, NewPanel, DetailContainer, ExportPanel },
  mixins: [tableMixin],
  data () {
    return {
      SOTRE_KEY_FINANCIAL_RECEIVABLELIST_LIST,
      returnedTypeSelect,
      timeTypeList, // 回款类型
      searchForm: {
        returnedNo: '',
        timeType: '',
        startTime: '',
        endTime: '',
        gathering: '',
        customerName: '',
        salesmanId: '',
        checkStatus: '3', // 审核状态
        overdueStatus: '-1', // 逾期状态
        returnedType: '' // 回款类型
      },
      newParams: {
        visible: false,
        obj: {}
      },
      detailParams: {
        visible: false,
        obj: {}
      },
      extendDetailParams: {
        visible: false,
        id: '',
        type: '',
        obj: {}
      },
      exportForm: {},
      exportParams: { visible: false }
    }
  },
  computed: {
    columns () {
      return columns(this)
    }
  },
  watch: {},
  created () {},
  methods: {
    exportApi () {
      return exportList
    },
    exportField () {
      return exportField
    },
    async loadList () {
      const _res = await getPageList(this.assignQuery(this.searchForm))
      this.initialTableData(_res.list, _res.count)
    },
    saveIds (selection, row) {
      // 保存已选
      this.selectedNos = selection.map(item => item.id).join(',')
    },
    onReset () {
      if (this.$refs.searchForm) {
        this.$refs.searchForm.resetFields()
        this.searchForm.startTime = ''
        this.searchForm.endTime = ''
        this.onSearch()
      }
    },
    onAdd () {
      this.newParams = {
        visible: true,
        obj: {}
      }
    },
    onEdit (row) {
      this.newParams = {
        visible: true,
        obj: row
      }
    },
    onGetFields () {
      this.exportParams.visible = true
    },
    onExport (fields) {
      this.exportForm = {
        ...this.searchForm,
        ...{ ids: this.selectedNos },
        ...{ fields: fields }
      }
      this.$refs.export.onExport()
    },
    onDetail (row) {
      this.detailParams = {
        visible: true,
        obj: row
      }
    },
    onExtendShow (id, type) {
      this.extendDetailParams = {
        visible: true,
        id: id,
        businessId: id,
        type: type
      }
    },
    onDel (row) {
      this.$confirm('是否确认删除该回款记录?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delReturned({ id: row.id })
          this.$message.success('删除成功')
          this.onSearch()
        })
        .catch(() => {})
    },
    async onApproval (row) {
      if (
        row.returnedType === '2' &&
        +row.balanceAmount + +row.residue > 0
      ) {
        this.$message.error('红冲金额输入错误')
        return
      }
      if (
        (row.returnedType === '1' &&
        +row.returnedMoney > +row.residue - +row.approvalReturnedMoney)
      ) {
        this.$confirm(
          '本期回款的金额已超过剩余金额减去冻结金额, 确定提交审批/保存?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(() => {
            this.onSubmitApproval(row)
          })
          .catch(() => {})
      } else {
        this.onSubmitApproval(row)
      }
    },
    async onSubmitApproval (row) {
      await checkApprove({processType: '7'})
      const params = {
        processType: '7', // 7->回款录入审批
        linkName: '销售单' + row.saleOrderNo + '回款', // 审批标题
        businessId: row.id // 关联的业务表id
      }
      await submit(params)
      this.$message.success('提交成功')
      this.loadList()
    },
    async onRevoke (row) {
      const params = {
        processType: '7', // 7->回款录入审批
        businessId: row.id // 关联的业务表id
      }
      await cancel(params)
      this.$message.success('撤销成功')
      this.loadList()
    }
  }
}
</script>

<style scoped lang="scss"></style>
